import { createRouter, createWebHashHistory } from 'vue-router'
import { useTitle } from '@vueuse/core'
import routes from './router'
import { getToken } from '@/libs/util'

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

const LOGIN_PAGE_NAME = 'login'
const homeName = 'myapp'
const loginUrl = window.location.origin + '/login.html'
const homeUrl = window.location.origin + '/admin/#/myapp'

// 全局的前置守卫
router.beforeEach((to, from, next) => {
    to.meta && useTitle(to.meta.title)
    const token = getToken()

    // 未登录且要跳转的页面不是登录页
    if (!token && to.name !== LOGIN_PAGE_NAME) {
        if (process.env.NODE_ENV === 'production') { // 生产环境
            // next()
            // !token && (window.location.href = loginUrl)
            next({
                name: LOGIN_PAGE_NAME, // 跳转到登录页
                query: {
                    routeName: to.name || homeName
                }
            })
        } else { // 开发环境
            next({
                name: LOGIN_PAGE_NAME, // 跳转到登录页
                query: {
                    routeName: to.name || homeName
                }
            })
        }
    }
    // 未登录且要跳转的页面是登录页
    else if (!token && to.name === LOGIN_PAGE_NAME) {
        if (process.env.NODE_ENV === 'production') { // 生产环境
            next()
            // !token && (window.location.href = loginUrl)
        } else { // 开发环境
            next()
        }
    }
    // 已登录且要跳转的页面是登录页
    else if (token && to.name === LOGIN_PAGE_NAME) {
        if (process.env.NODE_ENV === 'production') { // 生产环境
            // next()
            // !token && (window.location.href = homeUrl)
            next({
                name: homeName
            })
        } else { // 开发环境
            next({
                name: homeName
            })
        }
    }
    // 已登录且要跳转的页面是首页
    else if (token && to.name === homeName) {
        if (process.env.NODE_ENV === 'production') { // 生产环境
            next()
            // window.location.href = homeUrl
        } else { // 开发环境
            next()
        }
    }
    // 默认情况
    else {
        next()
    }
})

// 全局的后置守卫
router.afterEach((to, from, next) => {
    // 
})

/**
 * 1. 导航被触发
 * 2. 在失活的组件（即将离开的页面组件）里调用离开守卫 beforeRouteLeave
 * 3. 调用全局的前置守卫 beforeEach
 * 4. 在重用的组件里调用 beforeRouteUpdate
 * 5. 调用路由独享的守卫 beforeEnter
 * 6. 解析异步路由组件
 * 7. 在被激活的组件（即将进入的页面组件）里调用 beforeRouteEnter
 * 8. 调用全局的解析守卫 beforeResolve
 * 9. 导航被确认
 * 10. 调用全局的后置守卫 afterEach
 * 11. 触发DOM更新
 * 12. 用创建好的实例调用beforeRouterEnter守卫里传给next的回调函数
 */

export default router